<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";

import { EyeOutlined, DeleteOutlined } from "@ant-design/icons-vue";
// 视频预览组件
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";
const viewVideoRef = ref(null);

// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
import { message } from "ant-design-vue";

const formState = reactive({
  proportion: 0, // 比例 0:9:16 1:16:9
  fengge: "b", // 营销风格, 暂时用不到,
  clip_num:2,// 生成视频数量
});

const state = reactive({
  materiallibraryShow: false,
  // 视频列表
  videoArr: [],
});

// 需要的素材数据
const resource_data = computed(() => {
  if (!state.videoArr.length) return [];
  const videoList = state.videoArr.map((item) => {
    const { id, org_id, media_id, material_url } = item;
    return {
      id,
      org_id,
      media_id: media_id || "",
      material_url,
      material_duration: item.material_duration || 0,
    };
  });
  console.log(videoList, "视频素材123123213");

  return videoList;
});

// 素材库导入回调
const closeChooseMaterial = (data) => {
  if (!data || !data?.length) {
    state.materiallibraryShow = false; //关闭弹窗
    return;
  }

  const oldLen = data.length;
  let arr = [];
  arr = data.filter((item) => !state.videoArr.some((i) => i.id == item.id));
  if (oldLen != arr.length) {
    message.success("已为您自动去除重复素材");
  }
  state.videoArr = [...state.videoArr, ...arr];
  console.log(state.videoArr, "state.videoArr,去重");
  state.materiallibraryShow = false; //关闭弹窗
};

// 删除某项视频
const deleteVideo = (id) => {
  const findIndex = state.videoArr.findIndex((item) => item.id == id);
  if (findIndex != -1) {
    state.videoArr.splice(findIndex, 1);
  }
};

defineExpose({
  resource_data,
  formState,
});
</script>

<template>
  <div class="baseForm">
    <!-- 视频比例 -->
    <div class="left_content_item">
      <!-- 分组标题 -->
      <span class="left_content_item_title">
        生成视频比例
        <span class="red_dian"></span>
      </span>

      <div class="left_content_item_main">
        <a-radio-group v-model:value="formState.proportion">
          <a-radio-button :value="0">
            <span class="shu"></span>
            9:16</a-radio-button
          >
          <a-radio-button :value="1">
            <span class="heng"></span>
            16:9</a-radio-button
          >
        </a-radio-group>
      </div>
    </div>

    <!-- 营销风格 -->
    <div class="left_content_item" v-if="false">
      <!-- 分组标题 -->
      <span class="left_content_item_title"> 营销风格 </span>
      <div class="left_content_item_main">
        <a-radio-group v-model:value="formState.fengge">
          <a-radio-button value="a">国货</a-radio-button>
          <a-radio-button value="b"> 不限</a-radio-button>
        </a-radio-group>
      </div>
    </div>

    <!-- 视频原料 -->
    <div class="left_content_item">
      <!-- 分组标题 -->
      <div class="video_title">
        <div class="left_content">
          <span class="main_title">
            视频原料
            <span class="red_dian"></span>
          </span>
          <span class="ather_desc"
            >您一共需要上传15s≤视频总时长≤600s的内容视频
          </span>
        </div>
        <div class="right_content">
          <a-popconfirm
            title="确定要清除所有视频吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="state.videoArr = []"
          >
            <a-button type="link" style="padding: 0">
              <span style="font-size: 12px" v-show="state.videoArr.length"
                >清空视频</span
              >
            </a-button>
          </a-popconfirm>
        </div>
      </div>

      <div class="left_content_item_main">
        <template v-if="state.videoArr.length">
          <div class="video_material_box">
            <div class="video_material_btns">
              <a-button
                type="primary"
                @click="state.materiallibraryShow = true"
              >
                从素材库选取
              </a-button>
            </div>

            <div class="video_list_box">
              <div
                @click="viewVideoRef.open(item.material_url)"
                class="video_list_item"
                v-for="item in state.videoArr"
                :key="item.id"
              >
                <EyeOutlined
                  class="toView"
                  @click.stop="viewVideoRef.open(item.material_url)"
                >
                </EyeOutlined>
                <template v-if="item?.cover_url">
                  <div class="material_box">
                    <img :src="item?.cover_url" alt="" />
                  </div>
                </template>
                <template v-else>
                  <div class="material_box">
                    <video :src="item.material_url"></video>
                  </div>
                </template>

                <a-popconfirm
                  title="确定要删除此项视频吗？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="deleteVideo(item.id)"
                >
                  <DeleteOutlined
                    class="del_icon"
                    @click.stop="() => {}"
                  ></DeleteOutlined>
                </a-popconfirm>

                <div class="video_name">{{ item.material_name }}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="video_null">
            <h3>暂无视频原料</h3>
            <span class="center_desc"
              >请先从素材库中选择，才能进行混剪合成</span
            >
            <div class="video_material_btns">
              <a-button
                type="primary"
                @click="state.materiallibraryShow = true"
              >
                从素材库选取
              </a-button>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- 营销风格 -->
    <div class="left_content_item" >
      <!-- 分组标题 -->
      <span class="left_content_item_title">
        生成数量  
        <span class="red_dian"></span>
      </span>
      <div class="left_content_item_main">
        <a-input-number style="width: 100px;"  v-model:value="formState.clip_num" :min="1" :max="100" />
      </div>
    </div>
  </div>

  <!-- 视频预览 -->
  <viewVideo ref="viewVideoRef" :scriptExport="true"> </viewVideo>

  <!-- 素材导入 -->
  <ChooseMaterial
    :isClip="false"
    material_type="video"
    :multiple="true"
    :visible="state.materiallibraryShow"
    :isvideoGroup="true"
    @close="closeChooseMaterial"
    :haveTags="[
      {
        name: '网络素材',
        key: 'system_materials',
      },
    ]"
    useType="OneClickClip"
  />
</template>

<style lang="less" scoped>
.baseForm {
  // 小红点
  .red_dian {
    display: inline-block;
    height: 4px;
    width: 4px;
    background: red;
    border-radius: 50%;
    overflow: hidden;
  }

  .left_content_item {
    margin-bottom: 20px;

    // 分组标题 公共样式
    .left_content_item_title {
      display: flex;
      align-items: center;
      gap: 3px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    // 视频原料的定制标题
    .video_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
      margin-bottom: 15px;
      font-weight: 600;

      .left_content {
        display: flex;
        align-items: center;

        .main_title {
          display: flex;
          align-items: center;
          gap: 3px;
        }

        .ather_desc {
          font-weight: normal;
          color: #8a8a8a;
          font-size: 11px;
          margin-left: 3px;
        }
      }
    }

    // 分组内容 公共样式
    .left_content_item_main {
      // 公共的按钮容器样式
      .video_material_btns {
        display: flex;
        gap: 10px;
      }

      // 没有视频素材的样式
      .video_null {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h3 {
          font-weight: 600;
        }

        .center_desc {
          margin: 5px 0;
        }
      }

      // 视频素材容器
      .video_material_box {
        .video_list_box {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
          margin-top: 20px;

          .video_list_item {
            height: 251px;
            width: 125px;
            // height: 220px;
            // width: 100%;
            background: #000;
            display: flex;
            // justify-content: center;
            flex-direction: column;
            align-items: center;
            position: relative;
            cursor: pointer;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              z-index: 3;
              width: 100%;
              height: calc(100% - 30px);
              background: transparent;
              cursor: pointer;
              transition: all 0.3s;
            }

            &:hover {
              &::after {
                background: rgba(0, 0, 0, 0.5);
              }

              .toView {
                opacity: 1;
              }

              .del_icon {
                opacity: 1;
              }
            }

            .video_name {
              color: #000;
              background-color: #fff;
              width: 100%;
              // line-height: 30px;
              height: 30px;
              /* 溢出内容隐藏 */
              overflow: hidden;
              /* 文本溢出显示省略号 */
              text-overflow: ellipsis;
              /* 文本在一行显示 */
              white-space: nowrap;
            }

            .material_box {
              height: calc(100% - 30px);
              width: 100%;
              position: relative;

              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }

              video {
                width: 100%;
                height: 100%;
              }
            }

            // 预览小眼睛
            .toView {
              position: absolute;
              top: 40%;
              left: 50%;
              z-index: 9;
              opacity: 0;
              transition: all 0.3s;
              font-size: 25px;
              color: #fff;
              transform: translate(-50%);
              cursor: pointer;

              &:hover {
                color: var(--ss-primary-color-active);
              }
            }

            // 删除
            .del_icon {
              position: absolute;
              bottom: 15%;
              left: 12%;
              z-index: 9;
              opacity: 0;
              transition: all 0.3s;
              font-size: 15px;
              color: #fff;
              transform: translate(-50%);
              cursor: pointer;

              &:hover {
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
</style>
